---
title: IconButton
---

# IconButton

Transparent button for SVG icons

```js
import { IconButton } from 'theme-ui'
```

```jsx live=true
<IconButton aria-label="Toggle dark mode">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    width="24"
    height="24"
    fill="currentcolor">
    <circle
      r={11}
      cx={12}
      cy={12}
      fill="none"
      stroke="currentcolor"
      strokeWidth={2}
    />
  </svg>
</IconButton>
```

## Variants

IconButton variants can be defined in the `theme.buttons` object.
By default the IconButton component will use styles defined in `theme.buttons.icon`.
